<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签名选择器,选择页面中所有的p标签 */
        p{
            font-size: 20px;
        }
        /* id选择器,选择页面中id为xxx的元素 */
        #first{
            color: blueviolet;
        }
        /* 类选择器，选择页面中所有class属性包含XXX的元素 */
        .line{
            background-color: aliceblue;
        }
        /* 多选择器之间的连写，表示并且，并同时满足所有的选择器，才能被选中 */
        #first.line{
            text-align: center;
        }
        /* 多选择器连写 ,表示或者，满足一个选择器，就可以被选中*/
        #first,.line{
            /* 设置字体粗细  bold加黑加粗 */
            font-weight: bold;
        }
        /* 属性选择器，选择页面中所有拥有abc属性的元素 */
        [abc]{
            font-family: "宋体";
        }
        /* 包含选择器，#box里面所有p标签都会被选中 */
        #box p{
            color: pink;
        }
        /* 父子选择器，只选中自己的子元素，子元素的子元素不会被选中*/
        #box>p{
            background-color: #d73636;
        }
        /* 选中p标签中拥有abc属性的元素 */
        p[abc]{
            font-size: 30px;
        }
        /* 根据自定义的属性以及值，来选择 */
        [pro=val]{
            background-color: #43b33d;
            margin-top: 5px;
        }
        #t1,#t1 td{
            border: solid 1px black;
        }
        /* 选择中每行元素中的第n个标签 */
        td:nth-of-type(1){
            background-color: #bf4abb;
        }
        /* 选中每行元素中倒数第n个标签 */
        td:nth-last-of-type(2){
            background-color: aquamarine;
        }
        /* 2n选中每行元素中的第偶数个；2n+1选中奇数个 */
        td:nth-of-type(2n+1){
            background-color: #584abf;
        }
        /* 选中第2个开始及之后所有的标签 */
        td:nth-of-type(n+2){
            background-color: rgb(195, 50, 122);
        }
        /* 选中前2个标签 */
        td:nth-of-type(-n+2){
            background-color: rgb(195, 171, 50);
        }
        /* *表示全部，页面中所有元素 */
        *{
            margin: 0;
        }
        /* 伪类选择器  empty:元素内容为空时触发 */
        #d1:empty{
            width: 100px;
            height: 100px;
            background-color: #ac6b6b;
        }
    </style>
</head>
<body>

    <div id="d1"></div>
    <!-- 自定义属性abc -->
    <p class="line" id="first" abc="123">第一行</p > 
    <p class="line" id="second">第二行</p >
    <p class="line">第三行</p >
    <div id="box">
        <p>第四行</p>
        <p abc="456">第五行</p>
        <div abc="789">
            <p>第六行</p>
        </div>
    </div>
    <!-- html元素的属性分为两大类：
    1.通用属性：id、class、style，每个元素都有的属性
    2.特有属性：src、href、colspan、rowspan等某些标签特有的属性
    除此之外，html还允许自定义属性，-->

    <!-- 元素的属性分为两种叫做有值属性和无值属性 -->
    <div pro="val">w123456576</div>
    <div pro="aaa">qewretstrss</div>

    <table id="t1">
        <!-- 行 -->
        <tr>
            <!-- 列 -->
            <td>第一行</td>
            <td>第一行</td>
            <td>第一行</td>
            <td>第一行</td>
            <td>第一行</td>
        </tr>
        <tr>
            <!-- 列 -->
            <td>第2行</td>
            <td>第2行</td>
            <td>第2行</td>
            <td>第2行</td>
            <td>第2行</td>
        </tr>
        <tr>
            <!-- 列 -->
            <td>第3行</td>
            <td>第3行</td>
            <td>第3行</td>
            <td>第3行</td>
            <td>第3行</td>
        </tr>
    </table>
</body>
</html>